import React from "react"
import {
    WeaLocaleProvider,
    WeaRightMenu,
    WeaNewScroll,
    WeaTableEditable,
    WeaBrowser,
    WeaCheckbox
} from "ecCom";
import {inject, observer} from 'mobx-react';
import {Modal, Spin} from 'antd';
import {toJS} from "mobx";

const getLabel = WeaLocaleProvider.getLabel;

@inject("myParame", "myCreateForm", "myCusIntSet")//这个
@observer
class CustomInterfaceSetting extends React.Component {
    constructor(props) {
        super(props);
    }

    /**
     * 组件加载时执行
     */
    componentWillMount() {
        const {myCreateForm, myCusIntSet} = this.props;
        const {alldatas, isShowInterface} = myCreateForm;
        const {workflowid} = alldatas;//主要需要获取workflowid如果id为空着
        const {setLoading, init} = myCusIntSet;
        setLoading(false)
        if (workflowid && isShowInterface) {
            setLoading(true);
            init({workflowid: workflowid});
        }
    }

    /**
     * 组件更新时执行
     * @param nextprops
     */
    componentWillReceiveProps(nextprops) {
        const {myCreateForm, myCusIntSet} = nextprops;
        const {alldatas, isShowInterface} = myCreateForm;
        const {workflowid} = alldatas;//主要需要获取workflowid如果id为空着
        const {setLoading, init} = myCusIntSet;
        setLoading(false)
        if (workflowid && isShowInterface) {
            setLoading(true);
            init({workflowid: workflowid});
        }
    }

    /**
     * 获得右键公共菜单
     */
    fnGetRightBtn = () => {
        const {myParame, myCreateForm, myCusIntSet} = this.props;
        const {loading} = myCusIntSet;
        return [
            {
                key: '1',
                disabled: loading,
                icon: <i className="icon-coms-Save-as"/>,
                content: getLabel(86, "保存"),
                onClick: () => {
                    this.fnSaveInterfaceSetting();
                },
            }, {
                key: '2',
                disabled: loading,
                icon: <i className="icon-coms-Narrow"/>,
                content: getLabel(201, '取消'),
                onClick: () => {
                    myCreateForm.setShowInterface()
                },
            },
            {
                key: '5',
                disabled: loading,
                icon: <i className="icon-coms-Collection"/>,
                content: getLabel(28111, "收藏"),
                onClick: () => myParame.setVisiblecollect(),
            }
        ]
    }

    /**
     * 数据保存操作
     */
    fnSaveInterfaceSetting = () => {
        const {myCusIntSet, myCreateForm} = this.props;
        const {tabledata, doSaveInterfaceSetting} = myCusIntSet;
        const {alldatas} = myCreateForm;
        const {workflowid} = alldatas;//用于判断id是否存在，存在才开始保存
        doSaveInterfaceSetting({
            tabledatas: JSON.stringify(tabledata),
            workflowid: workflowid
        }, myCreateForm.setShowInterface);
    }

    /**
     * 获取行并信息
     * @value 文本值
     * @row 整行的数据
     * @index 行下标
     * @children ta的数据格式具体
     * @ishow 是否显示空数据
     */
    fnGetRowSpanMerge = (row, index, children, ishow) => {
        const obj = {
            props: {rowSpan: 1,},
            children: children,
        }
        if (row.linksize > 1 && !ishow) {//包含跨行,且不显示多行相同数据
            obj.props.rowSpan = row.rowspan;
        }
        if (!row.node_dest && ishow) {//没有目标节点  表示不输出信息
            obj.children = "";
        }
        return obj;
    }

    /**
     * 获取浏览按钮的信息
     * @param row 行信息
     * @param title 浏览框title
     * @param id 数据源id
     * @param isnode 是否是节点
     * @param islink 是否是出口
     * @returns {*}
     */
    fnGetBrowBtn = (row, title, id, isnode, islink) => {
        let replacedatas = toJS(row[id + "rep"]);
        return (<WeaBrowser
            type={"contractAction"}
            hasAdvanceSerach={true}
            title={title}
            isSingle={false}
            isMultCheckbox={false}
            viewAttr={2}
            replaceDatas={replacedatas}
            dataURL={"/api/contractlock/get/getActionBrow"}//查询数据源
            dataParams={{left: "true"}}//查询参数
            completeURL={"/api/contractlock/get/getActionBrow?"}//联想搜索
            completeParams={{src: ""}}//联想搜索参
            conditionURL={"/api/contractlock/get/getActionBrow?"}
            destUrl={"/api/contractlock/get/getActionBrow?"}
            onChange={(ids, names, datas) => {
                this.fnAdditionalChange(ids, names, datas, row, id, isnode, islink)
            }}
        ></WeaBrowser>);
    }

    /**
     * 获取check按钮的数据
     * @param value value值是否勾选
     * @param row 所在行信息
     * @param index 行号
     * @param id 数据来源id 【每一列中的数据id】
     * @param isnode 是否是节点
     * @param islink 是否是出口
     * @returns {*}
     */
    fnGetCheckBtn = (value, row, index, id, isnode, islink) => {
        return (<WeaCheckbox
            id={id + "_" + index}
            value={value}
            onChange={value => {
                this.fnCheckboxChange(value, row, id, isnode, islink)
            }}
        />);
    }

    /**
     * 附加操作onchange事件，这里主要是正对浏览按钮
     * @param ids_value 改变后的ids值
     * @param names_value 改变后的value值
     * @param datas 改变数据的封装【可以传null】
     * @param row 所属改变行的整体数据
     * @param id 列id
     * @param isnode 是否是节点
     * @param islink 是否是出口
     */
    fnAdditionalChange = (ids_value, names_value, datas, row, id, isnode, islink) => {
        const {myCusIntSet} = this.props;
        const {tabledata, updateTableData} = myCusIntSet;
        tabledata && tabledata.map(item => {
            if (isnode && item.nodeid == row.nodeid) {
                item[id] = ids_value;
                item[id + "span"] = names_value;
            }
            if (islink && item.linkid == row.linkid) {
                item[id] = ids_value;
                item[id + "span"] = names_value;
            }
        })
        tabledata && updateTableData(toJS(tabledata));
    }

    /**
     * 是否启用改变事件函数
     * @param value 改变的值 0不启用，1启用
     * @param row 行信息
     * @param id 改变的是哪一个附加操作  节点前，节点后， 出口
     * @param isnode 是否是节点
     * @param islink 是否是出口
     */
    fnCheckboxChange = (value, row, id, isnode, islink) => {
        const {myCusIntSet} = this.props;
        const {tabledata, updateTableData} = myCusIntSet;
        tabledata && tabledata.map(item => {
            if (isnode && item.nodeid == row.nodeid) {
                item[id] = value;
            }
            if (islink && item.linkid == row.linkid) {
                item[id] = value;
            }
        });
        tabledata && updateTableData(toJS(tabledata));
    }

    /**
     * 得到表格的抬头
     * @version 1.0
     * @author cc2018
     */
    fnGetTableTitle = () => {
        let that = this;
        const columns = [
            {
                title: <span>{getLabel(15070, "节点名称")}</span>,
                dataIndex: "nodename",
                width: '10%',
                com: [{type: "TEXT", key: "nodename"}],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, <span>{value}</span>);
                },
            },
            {
                title: <span>{getLabel(18009, "节点前附加操作")}</span>,
                dataIndex: "action_node_pre",
                width: "10%",
                com: [{type: "BROWSER", key: "action_node_pre"}],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_node_pre", true, false));
                },
            },
            {
                title: <span>{getLabel(18624, "是否启用")}</span>,
                dataIndex: 'checkbox_pre',
                width: '8%',
                checkVauleType: [true, false],
                com: [
                    {type: 'CHECKBOX', key: 'checkbox_pre'},
                ],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetCheckBtn(value, row, index, "checkbox_pre", true, false));
                },
            },
            {
                title: <span>{getLabel(18010, "节点后附加操作")}</span>,
                dataIndex: "action_node_next",
                width: "10%",
                com: [{type: "BROWSER", key: "action_node_next"}],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_node_next", true, false));
                },
            },
            {
                title: <span>{getLabel(18624, "是否启用")}</span>,
                dataIndex: 'checkbox_next',
                width: '8%',
                // showCheckAll: true, // 显示全选
                checkVauleType: [true, false],
                com: [
                    {type: 'CHECKBOX', key: 'checkbox_next'},
                ],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetCheckBtn(value, row, index, "checkbox_next", true, false));
                }
            },
            {
                title: <span>{getLabel(15611, "出口名称")}</span>,
                dataIndex: "link_name",
                width: '10%',
                style: {paddingLeft: "12px"},
                className: "link_name_cc",
                com: [{type: "TEXT", key: "link_name"}],
            },
            {
                title: <span>{getLabel(501330, "出口附加操作")}</span>,
                dataIndex: "action_link_next",
                width: "10%",
                com: [{type: "BROWSER", key: "action_link_next"}],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_link_next", false, true), true);
                }
            },
            {
                title: <span>{getLabel(18624, "是否启用")}</span>,
                dataIndex: 'checkbox_export',
                width: '8%',
                checkVauleType: [true, false],
                com: [
                    {type: 'CHECKBOX', key: 'checkbox_export'},
                ],
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetCheckBtn(value, row, index, "checkbox_export", false, true), true);
                }
            },
            {
                title: <span>{getLabel(501589, "节点目标")}</span>,
                dataIndex: "node_dest",
                width: '10%',
                com: [{type: "TEXT", key: "node_dest"}],
            },
        ];
        return columns;
    }

    /**
     * 列的个性化操作
     */
    fnGetCells = () => {
        //参考CreateLockForm_Table.js
        return [];
    }

    /**
     * 取消每一行的选则框
     * @param rowSelection
     */
    getRowSelection = rowSelection => {
        const sel = {...rowSelection};
        sel.getCheckboxProps = record => {
            return {disabled: record.id === '1'};
        };
    }

    /**
     * 在加载之前调用
     */
    fnGetInitData = () => {
        const {myCreateForm, myCusIntSet} = this.props;
        const {alldatas, isShowInterface} = myCreateForm;
        const {workflowid} = alldatas;//主要需要获取workflowid如果id为空着
        const {setLoading, init} = myCusIntSet;
        setLoading(false)
        if (workflowid && isShowInterface) {
            setLoading(true);
            init({workflowid: workflowid});
        }
    }

    render() {
        const {myParame, myCusIntSet} = this.props;
        let rightbtns = this.fnGetRightBtn();
        const columns = this.fnGetTableTitle();
        // const cellss = this.fnGetCells();
        const {tabledata, loading} = myCusIntSet;
        //数据
        let initialDatas = toJS(tabledata);
        return (
            <WeaRightMenu datas={rightbtns} style={{height: "100%"}}>
                <WeaNewScroll ref="scroll" style={{height:"100%", overflow:"auto"}}>
                    <Spin spinning={loading}>
                        <WeaTableEditable
                            datas={initialDatas}
                            className={"tabcss"}
                            columns={columns}
                            // cells={cellss}//个别列的不同表现形式
                            showTitle={false}
                            getRowSelection={this.getRowSelection}
                        >
                        </WeaTableEditable>
                    </Spin>
                </WeaNewScroll>
            </WeaRightMenu>
        )
    }
}

export {CustomInterfaceSetting}